<!DOCTYPE html>
<!-- saved from url=(0097)http://pyq001.1y0g.com/view3?uid=oJ642szr4G-SKgO5KFnUdr_NfWIU&from=singlemessage&isappinstalled=0 -->
<html>

<style type="text/css">
/**
 * Created by Administrator on 2016/1/31.
 */
#list,#list li,.po-hd,.post {
    overflow: hidden
}

.po-cmt,.post .list-img:nth-child(1),.time {
    float: left
}

#list li,.cmt-wrap,.r,.time {
    clear: both
}



blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,img {
    border: 0
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: 400
}

ol,ul {
    list-style: none none
}

caption,th {
    text-align: left
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: 400
}




* {
    -webkit-tap-highlight-color: transparent
}

html {
    background-color: #f8f8f8;
    font-family: Arial,sans-serif;
    font-size: 13px
}



.hide {
    display: none
}

header {
    position: relative
}

#avt,#user-name {
    position: absolute
}

#bg {
    width: 100%
}

#user-name {
    text-align: right;
    right: 114px;
    bottom: 15px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 1px .5px #000
}



#share a,#share p,.btn {
    text-align: center
}

#avt {
    width: 74px;
    height: 74px;
    border: 1px solid #dbdbdb;
    right: 15px;
    bottom: -22px;
    padding: 1px;
    background-color: #fff
}

#list li,.po-hd {
    position: relative
}

#list {
    padding: 30px 0 10px
}

#list li {
    line-height: 1.5;
    border-bottom: 1px solid #e2e2e2;
    margin-top: 15px;
    padding-bottom: 15px
}

#share a:nth-child(2),.ads,.po-avt {
    position: absolute
}

.ads {
    color: #999;
    right: 5px;
    top: 0
}

.ads img {
    width: 10px;
    padding-left: 8px
}

.ad-link {
    color: #3b5384
}

.post .ad-link img {
    width: 11px;
    padding: 0;
    display: inline-block
}

.po-avt-wrap {
    padding-left: 10px
}

.po-avt {
    width: 40px;
    height: 40px;
    top: 0;
    left: 10px
}

.r {
    border-bottom: 8px solid #eee;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    width: 1px;
    margin-top: 5px;
    margin-left: 10px
}

.po-cmt {
    padding-left: 60px;
    padding-right: 10px;
    width: 100%;
    box-sizing: border-box
}

.po-name {
    color: #576b95
}





.post .list-img {
    width: 30%;
    max-height: 80px;
    max-width: 80px;
    padding-right: 5px;
    float: left;
    object-fit: cover
}

.post .list-img:last-child {
    padding-right: 0
}

.time {
    color: #b1b1b1
}

.c-icon {
    width: 20px;
    float: right
}

.cmt-wrap {
    width: 100%;
    background-color: #eee
}

.like {
    color: #576b95;
    padding: 5px 5px 3px 12px
}

.like img {
    width: 12px;
    padding-right: 5px
}

.cmt-list {
    padding: 5px 12px;
    color: #454545
}

.cmt-list p {
    padding-top: 3px
}

.cmt-list span {
    color: #3b5384
}




</style>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的朋友圈</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>

<body>
<header>
    <img id="bg" src="1.jpg">
    <p id="user-name" class="data-name">giao全</p>
    <img id="avt" class="data-avt" src="3.jpg">
</header>
<div id="main">
    <div id="list">
        <ul>
            <li>
                <div class="po-avt-wrap">
                    <img class="po-avt data-avt" src="images/c3.jpg">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name"><span class="data-name">王giao全</span></p>
                        <div class="post">
                            <p>大家好，这是我的女朋友～</p>
                            <p>
                                <img class="list-img" src="images/7.jpg" style="height: 80px;">
                                <img class="list-img" src="images/7.jpg" style="height: 80px;">
                                <img class="list-img data-avt" src="images/7.jpg" style="height: 80px;">
                            </p>
                        </div>
                        <p class="time">刚刚</p><img class="c-icon" src="images/c.png">
                    </div>
                    <div class="r"></div>
                    <div class="cmt-wrap">
                        <div class="like"><img src="images/l.png">
                         王giao凡，王giao豪，吴giao林，王思聪，...</div>
                        <div class="cmt-list">
                            <p><span>王giao凡：</span>好看</p>
                            <p><span>王giao豪：</span>9999</p>
                            <p><span>吴giao林：</span>9999</p>
                            <p><span>王思聪：</span>9999</p>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="po-avt-wrap">
                    <img class="po-avt" src="images/c3.jpg">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name">
                            王giao凡
                        </p>
                        <div class="post">
                            <p>
                                那一年这兄弟三人发誓一定要出人头地
                                <br>
                                以后有福同享有难同当
                                <br>
                                如今：
                                <br>
                                大哥只手遮天万人之上
                                <br>
                                二哥黄金万两富甲一方
                                <br>
                                三弟淡泊名利为人低调
                            </p>
                            <img class="list-img" src="2.jpg" style="height: 80px;">
                            <img class="list-img" src="3.jpg" style="height: 80px;">
                            <img class="data-avt list-img" src="4.jpg" style="height: 80px;">
                        </div>
                        <p class="time">
                            1分钟前
                        </p>
                        <img class="c-icon" src="images/c.png">
                    </div>
                    <div class="r">
                    </div>
                    <div class="cmt-wrap">
                        <div class="like">
                            <img src="images/l.png">
                            王giao凡，王giao豪，吴giao林，王思聪，...
                        </div>
                        <div class="cmt-list">
                            <p>
                                        <span>
                                            吴giao林：
                                        </span>
                                赞！
                            </p>
                            <p>
                                <span class="data-name">王giao全</span>
                                        <span>
                                            ：
                                        </span>
                                低调低调。。
                            </p>
                            <p>
                                        <span>
                                            王思聪
                                        </span>
                                回复
                                <span class="data-name">王giao全</span>
                                        <span>
                                            ：
                                        </span>
                                哥您就是太低调了
                            </p>
                            <p>
                                        <span>
                                            王giao豪
                                        </span>
                                回复
                                <span class="data-name">王giao凡</span>
                                        <span>
                                            ：
                                        </span>
                                好几天没见，我们该聚聚了
                            </p>
                            <p>
                                        <span>
                                            王思聪
                                        </span>
                                回复
                                <span class="data-name">王giao全</span>
                                        <span>
                                            ：
                                        </span>
                                有笔大生意找你聊聊
                            </p>
                        </div>
                    </div>
                </div>
            </li>
           <li>
                <div class="po-avt-wrap">
                    <img class="po-avt" src="images/c3.jpg">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name">
                            王giao豪
                        </p>
                        <p class="post">
                            我失恋了，怎么没人安慰我！
                            <img class="data-avt" src="2.jpg" width="50%">
                        </p>
                        <p class="time">
                            52分钟前
                        </p>
                        <img class="c-icon" src="images/c.png">
                    </div>
                    <div class="r">
                    </div>
                    <div class="cmt-wrap">
                        <div class="like">
                            <img src="images/l.png">
                            <b class="data-name">王giao全</b>
                            ，王giao凡，王giao豪，吴giao林，王思聪...
                        </div>
                        <div class="cmt-list">
                                <span class="data-name">王giao凡</span>
                                        <span>
                                            ：
                                        </span>
                                又不是第一次被绿，叫个啥。
                            </p>
                        </div>
                    </div>
                </div>
            </li>
</div>
</body>
</html>